<template>
	<view class="content">
		<template v-if="customFields.length">
			<view class="address" v-for="(item, index) in customFields" :key="index">
				<text class="address-tlt" style="margin-bottom: 24rpx">参赛人：{{ item.playerName }}</text>
				<view class="result">
					<u-cell-group :border="false">
						<u-cell
							v-for="its in item.fieldList"
							:key="its.fieldVal"
							:title="its.fieldName"
							:border="false"
							:value="its.fieldVal"
						></u-cell>
					</u-cell-group>
				</view>
				<u-line dashed margin="20rpx 0 14rpx" color="#aaa"></u-line>
				<view class="flex-r">
					<u-button
						text="查看证书"
						color="#e50012"
						shape="circle"
						size="small"
						customStyle="width:150rpx;height:52rpx;font-size:32rpx"
						:throttleTime="1500"
						:hoverStopPropagation="true"
						@click.native.stop="onDownloadFile(item)"
					></u-button>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="racename">{{ raceInfo.raceName }}</view>
			<view class="racetime">
				比赛时间：{{ raceInfo.groupStartTime ? raceInfo.groupStartTime.split(' ')[0] : '--' }}
			</view>
			<view class="address" v-for="(item, index) in players" :key="index">
				<text class="address-tlt" style="margin-bottom: 24rpx">参赛成绩-{{ item.playerName }}</text>
				<view class="user">
					<u-grid :border="false" col="3">
						<u-grid-item>
							<text class="grid-label">比赛项目（KM）</text>
							<text class="grid-text">{{ item.groupName }}</text>
						</u-grid-item>
						<u-grid-item>
							<text class="grid-label">净成绩</text>
							<text class="grid-text">{{ item.allRank || '--' }}</text>
						</u-grid-item>
						<u-grid-item>
							<text class="grid-label">枪声成绩</text>
							<text class="grid-text">{{ item.allRankGun || '--' }}</text>
						</u-grid-item>
					</u-grid>
					<u-cell-group :border="false" v-if="item.show">
						<u-cell
							title="5KM(净)"
							:border="false"
							:value="item.result5 || '--'"
							v-if="item.result5"
						></u-cell>
						<u-cell
							title="5KM(枪)"
							:border="false"
							:value="item.result5Gun || '--'"
							v-if="item.result5Gun"
						></u-cell>
						<u-cell
							title="10KM(净)"
							:border="false"
							:value="item.result10 || '--'"
							v-if="item.result10"
						></u-cell>
						<u-cell
							title="10KM(枪)"
							:border="false"
							:value="item.result10Gun || '--'"
							v-if="item.result10Gun"
						></u-cell>
						<u-cell
							title="15KM(净)"
							:border="false"
							:value="item.result15 || '--'"
							v-if="item.result15"
						></u-cell>
						<u-cell
							title="15KM(枪)"
							:border="false"
							:value="item.result15Gun || '--'"
							v-if="item.result15Gun"
						></u-cell>
						<u-cell
							title="20KM(净)"
							:border="false"
							:value="item.result20 || '--'"
							v-if="item.result20"
						></u-cell>
						<u-cell
							title="20KM(枪)"
							:border="false"
							:value="item.result20Gun || '--'"
							v-if="item.result20Gun"
						></u-cell>
						<u-cell
							title="21.0975KM(净)"
							:border="false"
							:value="item.result21 || '--'"
							v-if="item.result21"
						></u-cell>
						<u-cell
							title="21.0975KM(枪)"
							:border="false"
							:value="item.result21Gun || '--'"
							v-if="item.result21Gun"
						></u-cell>
						<u-cell
							title="25KM(净)"
							:border="false"
							:value="item.result25 || '--'"
							v-if="item.result25"
						></u-cell>
						<u-cell
							title="25KM(枪)"
							:border="false"
							:value="item.result25Gun || '--'"
							v-if="item.result25Gun"
						></u-cell>
						<u-cell
							title="30KM(净)"
							:border="false"
							:value="item.result30 || '--'"
							v-if="item.result30"
						></u-cell>
						<u-cell
							title="30KM(枪)"
							:border="false"
							:value="item.result30Gun || '--'"
							v-if="item.result30Gun"
						></u-cell>
						<u-cell
							title="35KM(净)"
							:border="false"
							:value="item.result35 || '--'"
							v-if="item.result35"
						></u-cell>
						<u-cell
							title="35KM(枪)"
							:border="false"
							:value="item.result35Gun || '--'"
							v-if="item.result35Gun"
						></u-cell>
						<u-cell
							title="40KM(净)"
							:border="false"
							:value="item.result40 || '--'"
							v-if="item.result40"
						></u-cell>
						<u-cell
							title="40KM(枪)"
							:border="false"
							:value="item.result40Gun || '--'"
							v-if="item.result40Gun"
						></u-cell>
						<u-cell
							title="42.195KM(净)"
							:border="false"
							:value="item.result42 || '--'"
							v-if="item.result42"
						></u-cell>
						<u-cell
							title="42.195KM(枪)"
							:border="false"
							:value="item.result42Gun || '--'"
							v-if="item.result42Gun"
						></u-cell>
						<u-cell title="平均配速" :border="false" :value="item.avgSpeedPei || '--'"></u-cell>
						<u-cell title="平均时速" :border="false" :value="item.avgSpeedShi || '--'"></u-cell>
						<u-cell title="性别净名次" :border="false" :value="item.sexRank || '--'"></u-cell>
						<u-cell title="性别枪名次" :border="false" :value="item.sexRankGun || '--'"></u-cell>
						<u-cell title="年龄段净名次" :border="false" :value="item.ageRank || '--'"></u-cell>
						<u-cell title="年龄段枪名次" :border="false" :value="item.ageRankGun || '--'"></u-cell>
					</u-cell-group>
				</view>
				<view class="flex-cc" style="margin-top: 18rpx">
					<u-icon
						:label="item.show ? '收起' : '展开'"
						size="28rpx"
						:name="item.show ? 'arrow-up-fill' : 'arrow-down-fill'"
						color="#999"
						labelSize="26rpx"
						@click="onToggle(item)"
					></u-icon>
				</view>
				<u-line dashed margin="20rpx 0 14rpx" color="#aaa"></u-line>
				<view class="flex-r">
					<u-button
						text="查看证书"
						color="#e50012"
						shape="circle"
						size="small"
						customStyle="width:150rpx;height:52rpx;font-size:32rpx"
						:throttleTime="1500"
						:hoverStopPropagation="true"
						@click.native.stop="onDownloadFile(item)"
					></u-button>
				</view>
			</view>
		</template>

		<view class="footer">
			<button class="footer-btn" @click="onBack">返回</button>
		</view>
	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			id: '',
			info: {},
			raceInfo: {},
			players: [],
			isLock: false,
			customFields: []
		}
	},
	async onLoad(options) {
		this.id = options.id
		this.getCustomUploadScore()
		this.getRaceDetailInfo()
	},
	methods: {
		getDetailInfo() {
			/* prettier-ignore */
			this.$https( true, 'get', {
				url:'/member/result/score/'+this.id,
				data: {}
			},(res) => {
				this.info = res.data
				this.players = res.data.players || []
			})
			/* prettier-ignore */
		},
		// 自定义上传成绩
		getCustomUploadScore() {
			/* prettier-ignore */
			this.$https( true, 'get', {
				url:`/member/order/fields/${this.id}/4`,
				data: {}
			},(res) => {
				this.customFields = res.data || []
				if(!this.customFields.length){
					this.getDetailInfo()
				}
			})
			/* prettier-ignore */
		},
		getRaceDetailInfo() {
			/* prettier-ignore */
			this.$https(true, 'get', {
				url: '/member/order/info/'+this.id,
				data: {}
			},(res) => {
				this.raceInfo = res.data
			})
			/* prettier-ignore */
		},

		async onDownloadFile(item) {
			/* prettier-ignore */
			this.$https( true, 'get', {
					url: `/member/result/download/${this.id}/${item.playerId}`
				},
				(res) => {
					if(!res.data){
						uni.$u.toast('暂无证书，请稍后查看！')
						return
					}
					console.log(res.data)
					uni.previewImage({
						urls: [res.data]
					});
				})
			/* prettier-ignore */
		},
		onToggle(item) {
			item.show = !item.show
			this.$forceUpdate()
		},
		onBack() {
			uni.navigateBack({ delta: 1 })
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	padding: 20rpx 0 130rpx;
	position: relative;
	background-color: #fff;
}
.racename {
	font-size: 32rpx;
	color: #333;
	font-weight: 550;
	padding: 20rpx 28rpx 12rpx;
}
.racetime {
	font-size: 28rpx;
	color: #999;
	padding: 0 28rpx 20rpx;
}
.address {
	padding: 24rpx 28rpx;
	width: calc(702rpx - 56rpx);
	overflow-x: hidden;
	background-color: #f8f8f8;
	border-radius: 16rpx;
	margin: 0 auto 24rpx;
	&-tlt {
		font-size: 28rpx;
		color: #898989;
		border-bottom: 1px solid #e9e9e9;
		display: block;
		padding-bottom: 18rpx;
		&:before {
			display: inline-block;
			content: '';
			width: 8rpx;
			height: 30rpx;
			float: left;
			margin: 4rpx 10rpx 0;
			background-color: #0071c5;
		}
	}
}
.tips {
	background-color: #d4f0ff;
	font-size: 26rpx;
	color: #0071c5;
	padding: 16rpx 20rpx;
	line-height: 36rpx;
	margin: 12rpx 6rpx 10rpx;
}
.footer {
	width: calc(100% - 48rpx);
	padding: 0 24rpx;
	height: 120rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	z-index: 9;
	border-top: 1px solid #e5e5e5;
	&-btn {
		width: 684rpx;
		height: 80rpx;
		background-color: #eee;
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #666;
		margin: 0;
	}
}
.grid-label {
	color: #999;
	font-size: 26rpx;
	text-align: center;
}
.grid-text {
	color: #333;
	font-size: 30rpx;
	display: block;
	font-weight: 550;
	padding: 16rpx 0 30rpx;
	text-align: center;
}
::v-deep {
	.u-cell .u-cell__body {
		padding: 6rpx 10rpx;
		.u-cell__title-text {
			font-size: 26rpx;
			color: #898989;
			// min-width: 200rpx;
		}
		.u-cell__value {
			font-size: 26rpx;
			font-weight: 500;
			color: #231815;
		}
		.u-cell__body__content {
			width: auto;
		}
	}
	.u-cell-group__wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		.u-cell {
			width: 48%;
			margin-right: 2%;
			&:nth-child(2n) {
				margin-right: 0;
				margin-left: 2%;
			}
		}
	}
	.u-button {
		margin: 0;
	}
}
</style>
<style>
page {
	background-color: #fff;
}
</style>
